<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta name="full-screen" content="yes">
    <meta content="default" name="apple-mobile-web-app-status-bar-style">
    <meta name="screen-orientation" content="portrait">
    <meta name="browsermode" content="application">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <base target="_blank">
    <title>WeChat It's a life</title>
    <link rel="stylesheet" href="./src/css/jquery.emoji.css" type="text/css">
    <link rel="stylesheet" href="./lib/css/jquery.mCustomScrollbar.min.css" type="text/css">
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" type="image/x-icon" href="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico">
    <link rel="stylesheet" href="./css/chat.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    /*表情包不要边框*/
    .emoji_content ul li{
        border:none;
    }

    .login_box {
        z-index: 999;
        width: 420px;
        height: 480px;
        background: white;
        position: relative;
        top: 200px;
        left: 50%;
        margin-left: -210px;
        color: black;
        padding: 20px 30px;
        box-sizing: border-box;
        box-shadow: 3px 5px 10px gray;
        

    }
   

    .login_box span {
        /* position: absolute;
            top:30px;*/
        display: block;
        width: 200px;
        margin: 10px auto;
        text-align: center;
        color: black;
        letter-spacing: 5px;
        font-size: 30px;
    }

    .login_box::before {
        display: table;
        content: "";

    }

    .login_box ul::after {
        display: table;
        content: "";
        clear: both;
    }

    .login_box ul li {
        list-style: none;
        width: 53px;
        height: 50px;
        margin-right: 9px;
        margin-top: 3px;
        float: left;
        box-sizing: border-box;
        display: table-cell;
        text-align: center;
        padding-top: 3px;

    }

    .login_box ul li:hover {
        border: 1px solid gray;
    }

   /* .login_box ul li:first-child,
    .login_box ul li:nth-child(6) {
        margin-left: 3px;
    }*/

    .login_box input {
        margin-top: 5px;
        width: 90%;
        padding: 10px 15px;
        outline-style: none;
        border: 1px solid #ccc;
        border-radius: 3px;


    }

    .login_box button {
        width: 100%;
        padding: 8px 0px;
        outline-style: none;
        border: 2px solid #ccc;
        border-radius: 3px;
        margin-top: 20px;
        background-color: skyblue;
        letter-spacing: 10px;
        font-size: 20px;
    }

    .login_box button:hover {
        border: 2px solid red;
    }

    .login_box ul {
        margin-top: 5px;
        border: 1px solid gray;
        box-shadow: 5px 3px 10px gray;
        padding: 10px 22px;
        box-sizing: border-box;
        overflow: auto;
        height: 120px;
        cursor: 
    }
   
   /* .login_box ul::-webkit-scrollbar{
        display: none;
    }*/

    .login_box .name {
        margin-top: 30px;
    }

    .login_box .check {
        margin-top: 10px;
    }

    .login_box li img {
        height: 45px;
    }

    .login_box .now {
        border: 1px solid green;
    }

    .top {
        text-align: center;


    }

    .top .room {
        color: white;
        font-family: 楷体;
        line-height: 70px;
        font-size: 18px;
    }

    .own {
        margin-top: .5em;
        height: 3.5em;
        padding-left: 1.5em;
        border-bottom: 1px solid #cdcfcb;

    }

    .own img {
        height: 45px;
        margin-right: 20px;
    }

    .own .fa-eye {
        color: red;
    }

    .own span {
        font-size: 16px;
        color: #484a4b;
    }

    .own .user_money span {
        text-decoration: underline;
    }

    #editor {
        height: 91px;
        background-color: #fff;
        border: 1px solid #ccc;
        border-bottom: none;
        border-radius: 4px;
        box-shadow: 0 1px 1px rgb(0 0 0 / 8%) inset;
        outline: none;
        color: #555;
        display: block;
        font-size: 14px;
        line-height: 1.42857;
        padding: 6px 12px;
        transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        width: 100%;
    }

    .emoji_container {
        z-index: 9999;
    }

    .kh img {
        width: 20px;

    }



    /*红包样式*/
    .msg-left .wrap_box {
        float: left;

    }

    .wrap_box {
        position: relative;
    }

    .msg-left .wrap_box::before {
        content: "";
        position: absolute;
        top: 12px;
        left: -8px;
        height: 0px;
        width: 0px;
        border-width: .4em .6em .4em 0;
        border-style: solid;
        z-index: 9999;
        border-color: transparent;
        border-right-color: rgb(251, 157, 59);
        /*rgb(251,157,59)*/
    }

    .msg-right .wrap_box::before {
        content: "";
        position: absolute;
        top: 12px;
        right: -8px;
        height: 0px;
        width: 0px;
        border-width: .4em 0 .4em .6em;
        border-style: solid;
        z-index: 9999;
        border-color: transparent;
        border-left-color: rgb(251, 157, 59);
        /*rgb(251,157,59)*/
    }

    .msg-right .wrap_box {
        float: right;

    }

    .msg-right::after,
    .msg-left::after {
        content: "";
        display: table;
        clear: both;
    }
    #msgs{
        font-family:楷体;
    }

    .wrap_box {
        margin: 7px 58px;
        width: 165px;
        box-sizing: border-box;

    }

    .wrap_box .top1 {
        position: relative;
        border-radius: 2px 2px 0px 0px;
        box-sizing: border-box;
        padding-left: 13px;
        padding-top: 10px;
        height: 56.7px;
        background-color: rgb(251, 157, 59);
    }

    .wrap_box .top1 img {
        width: 30px;
        border-radius: 1.3px;
        vertical-align: top;
        box-shadow: 1px 1px 5px rgb(251, 157, 59);

    }

    .wrap_box .top1 .box span {
        font-weight: lighter;
        font-size: 9px;
        color: white;
        font-family: 楷体;
    }

    .wrap_box .buttom {
        height: 17.3px;
        padding: 0px;
        margin-top: 1.5px;
        box-sizing: border-box;
        border-radius: 0px 0px 2px 2px;
        border: .7px solid rgb(236, 236, 236);
        border-top: none;
    }

    .wrap_box .box {

        line-height: 19px;
        position: absolute;
        top: 8px;
        left: 52px;
        display: inline-block;
    }

    .wrap_box .buttom .box1 span {
        font-size: 16px;
        float: left;

        font-weight: lighter;
        font-size: 9px;

    }

    .wrap_box .buttom img {
        vertical-align: middle;
        float: right;

        height: 12px;
    }

    .wrap_box .box1 {
        box-sizing: border-box;
        padding-top: 1px;
        padding-left: 2px;
        line-height: 85%;
        margin: 0 auto;
        width: 88%;
        height: 85%;
        color: gray;

    }

    #kai1 {
        position: absolute;
        z-index: 999;
        top: 15em;
        left: 18em;

    }

    #kai1 img {
        width: 200px;
        border-radius: 6px;
    }

    .top {
        position: relative;
    }

    .mask {
        position: fixed;
        left: 0px;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: black;
        z-index: 2;
        opacity: .8;
    }

    /*发红包输入*/
    .parent {
        position: absolute;
        z-index: 2;
        top: 10em;
        left: 18em;
        width: 311px;
        height: 414px;
        background-color: #ECEDEE;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 12px 12px 5px 5px;


    }

    .top2 {
        height: 54px;
        background-color: #D13D4B;
        text-align: center;
        line-height: 54px;
        font-size: 17px;
        color: white;
        letter-spacing: 1.1px;

    }

    #pu {
        height: 44px;
        position: relative;

    }

    #pu #lk {
        width: 70%;
        position: absolute;
        left: 50%;
        color: #D13D4B;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    #pu #lk span:last-child {
        float: right;
    }

    #pu #lk span:first-child {
        float: left;
    }

    .send {
        height: 32px;
        width: 200px;
        background-color: #FFB6C1;
        margin: 0 auto;
        text-align: center;
        line-height: 32px;
        color: white;
        cursor: pointer;
    }

    .parent .money,
    .parent .number,
    .Copywriting {
        width: 76%;
        box-sizing: border-box;
        height: 100%;
        border: none;
        padding: 0px 15px;
        outline: none;
    }

    #moneybox,
    #numberbox {
        padding: 0px 15px;
        background-color: white;
        margin-bottom: 22px;
        height: 44px;
        box-sizing: border-box;
    }

    .Copywriting {
        width: 100%;
        margin-bottom: 50px;
        height: 44px;
    }
    .rel-item img{
        width: 40px;
    }
    </style>
</head>

<body lang="zh">
    <div class="mask" style="display: none"></div>
    <div class="login_box" id="login_box" style="display:block;">
        <span>用户登录</span>
        <p class="name">用户名</p>
        <input type="text" placeholder="请输入用户名" id="user_name" autofocus>
        <p class="check">选择头像</p>
        <ul class="avatar" id="login_avatar">
            <li><img src="./imgs/001.gif" alt=""></li>
            <li><img src="./imgs/002.gif" alt=""></li>
            <li><img src="./imgs/003.gif" alt=""></li>
            <li><img src="./imgs/004.jpg" alt=""></li>
            <li><img src="./imgs/005.jpg" alt=""></li>
            <li><img src="./imgs/006.jpeg" alt=""></li>
            <li><img src="./imgs/006.gif" alt=""></li>
            <li><img src="./imgs/008.jpeg" alt=""></li>
            <li><img src="./imgs/009.jpeg" alt=""></li>
            <li><img src="./imgs/10.jpeg" alt=""></li>
            <li><img src="./imgs/a.jpg" alt=""></li>
            <li><img src="./imgs/b.jpg" alt=""></li>
            <li><img src="./imgs/c.jpg" alt=""></li>
            <li><img src="./imgs/d.jpg" alt=""></li>
            <li><img src="./imgs/e.jpg" alt=""></li>
            <li><img src="./imgs/f.jpg" alt=""></li>
            <li><img src="./imgs/g.jpg" alt=""></li>
            <li><img src="./imgs/h.jpg" alt=""></li>
            <li><img src="./imgs/j.jpg" alt=""></li>
            <li><img src="./imgs/k.jpg" alt=""></li>
        </ul>
        <button id="login_btn">登录</button>
    </div>
    <div class="abs cover contaniner" id="contaniner" style="display:none;">
        <div class="abs cover pnl">
            <div class="top pnl-head">
                <span class="room">聊天室(<span id="userCount">99</span>)</span>
                <div id="kai1"><img src="./imgs/kai.jpg" alt="" class="" style="display: none"></div>
                <div class="parent" style="display:none">
                    <div class="top2">发红包</div>
                    <div id="pu">
                        <div id="lk">
                            <span>普通红包</span>
                            <span>口令红包</span>
                        </div>
                    </div>
                    <div id="moneybox">
                        <span>金额</span>
                        <input type="number" class="money" style='text-align:right;'>
                        <span>元</span>
                    </div>
                    <div id="numberbox">
                        <span>个数</span>
                        <input type="number" class="number">
                        <span>个</span>
                    </div>
                    <input type="text" class="Copywriting" value="恭喜发财,大吉大利!">
                    <div class="send">下一步</div>
                </div>
            </div>
            <div class="abs cover pnl-body" id="pnlBody">
                <div class="abs cover pnl-left">
                    <div class="abs cover pnl-msgs scroll" id="show">
                        <!-- <div class="msg min time" id="histStart">${data.username}离开了群聊</div> -->
                        <div class="pnl-list" id="hists">
                            <!-- 历史消息 -->
                        </div>
                        <div class="pnl-list" id="msgs">
                            <!-- <div class="msg robot">
                                <div class="msg-left" worker="小龙">
                                    <div class="msg-host photo" style="background-image: url(../Images/head.png)"></div>
                                    <div class="msg-ball" title="今天 17:52:06">你好，我是只能打字的聊天机器人  <br><br>您是想要了解哪些方面呢？</div>
                                </div>
                            </div> -->
                           <!--  <div class="msg guest">
                                <div class="msg-right">
                                    <div class="msg-host headDefault"></div>
                                    <div class="msg-ball" title="今天 17:52:06">你好</div>
                                </div>
                            </div> -->
                            <!-- <div class="msg-right">
                                <div class="msg-host photo" style="background-image: url(../Images/head.png)"></div>
                                <div class="wrap_box ">
                                    <a href="javascript:;">
                                        <div class="top1">
                                            <img src="./imgs/pack.jpg">
                                            <div class="box">
                                                <span>恭喜发财,大吉大利!</span><br>
                                                <span>领取红包</span>
                                            </div>
                                        </div>
                                    </a>
                                    <div class="buttom">
                                        <div class="box1">
                                            <span>微信红包</span><img src="./imgs/we.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="msg-left" worker="小龙">
                                <div class="msg-host photo" style="background-image: url(../Images/head.png)"></div>
                                <div class="wrap_box ">
                                    <a href="javascript:;">
                                        <div class="top1">
                                            <img src="./imgs/pack.jpg">
                                            <div class="box">
                                                <span>恭喜发财,大吉大利!</span><br>
                                                <span>领取红包</span>
                                            </div>
                                        </div>
                                    </a>
                                    <div class="buttom">
                                        <div class="box1">
                                            <span>微信红包</span><img src="./imgs/we.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="msg-left" worker="小龙">
                                <div class="msg-host photo" style="background-image: url(../Images/head.png)"></div>
                                <div class="wrap_box ">
                                    <div class="top1">
                                        <img src="./imgs/pack.jpg">
                                        <div class="box">
                                            <span>恭喜发财,大吉大利!</span><br>
                                            <span>领取红包</span>
                                        </div>
                                    </div>
                                    <div class="buttom">
                                        <div class="box1">
                                            <span>微信红包</span><img src="./imgs/we.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                            <!--  <div class="msg guest">
                                <div class="msg-right">
                                    <div class="msg-host headDefault"></div>
                                    <div class="msg-ball" title="今天 17:52:06"><img src="./imgs/pack.jpg" alt="">恭喜发财,大吉大利<br><span>领取红包</span></div>
                                </div>
                            </div>  -->
                        </div>
                        <div class="pnl-list hide" id="unreadLine">
                            <div class="msg min time unread">未读消息</div>
                        </div>
                    </div>
                    <div class="abs bottom pnl-text">
                        <div class="abs top pnl-warn" id="pnlWarn">
                            <div class="fl btns rel pnl-warn-free">
                                <label for="file"><img class="kh warn-btn" src="./imgs/71.gif" alt=""></label>
                                <input type="file" style="display: none" id="file">
                                <img src="./imgs/5.jpg" class="face kh warn-btn" title="图片" id="emojiBtn3" />
                                <img src="./imgs/85.gif" class="kh warn-btn" title="保存" id="wallet" />
                            </div>
                        </div>
                        <div class="abs cover pnl-input">
                            <div class="scroll" id="editor" contenteditable='true' placeholder="在此输入文字信息..."></div>
                            <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                                <ul class="atcom" id="atcom"></ul>
                            </div>
                        </div>
                        <div class="abs br pnl-btn" id="submit" style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);">发送</div>
                        <div class="pnl-support" id="copyright"><a href="#">版权什么的</a></div>
                    </div>
                </div>
                <div class="abs right pnl-right">
                    <div class="slider-container hide"></div>
                    <div class="pnl-right-content">
                        <div class="own">
                            <img src="./imgs/001.gif" alt=""><span class="user_name">11</span>&nbsp;&nbsp;&nbsp;<span class="user_money"><i class="fa fa-credit-card" style="color:red"></i>&nbsp;<span class="showmoney" style="display:none;">0.00</span><span style="display: inline;" class="hidemoney">***</span>&nbsp;元</span>&nbsp;<i class="fa fa-eye fa-eye-slash"></i><!-- fa-eye-slash -->
                        </div>
                        <div class="pnl-tabs">
                            <div class="tab-btn active" id="hot-tab">用户列表</div>
                            <div class="tab-btn" id="rel-tab">相关问题</div>
                        </div>
                        <div class="pnl-hot">
                            <ul class="rel-list unselect" id="hots">
                            </ul>
                        </div>
                        <div class="pnl-rel" style="display:none;">
                            <ul class="rel-list unselect" id="rels">
                                <li class="rel-item">这是一个问题，这是一个问题？</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="./lib/script/jquery.emoji.min.js"></script>
<script type="text/javascript" src="./lib/script/jquery.mousewheel-3.0.6.min.js"></script>
<script src="./lib/script/jquery.mCustomScrollbar.min.js"></script>
<script src="./js/main.js"></script>
</html>